<!--
  功能：表单item
  时间：2023年04月17日 16:59:14
-->
<template>
  <div class="form-item flex">
    <div class="form-left" :style="`width:${width}px`">
      <span v-if="required">*</span>{{ name }} :
    </div>
    <div class="form-right" :style="`width: calc(100% - ${width}px)`"><slot></slot></div>
  </div>
</template>

<script lang="ts" setup>
interface IProps {
  name: string;
  required?: boolean;
  width?: number;
}

withDefaults(defineProps<IProps>(), {
  width: () => 180, //左边宽度
});
</script>

<style scoped lang="scss">
.form-item {
  margin-bottom: 30px;
  align-items: flex-start;
  .form-left {
    line-height: 30px;
    text-align: right;
    padding-right: 20px;
    span {
      color: #c00;
      margin-right: 3px;
      display: inline-block;
    }
  }
}
</style>
